<template>
  <div class="chat-container">
    <el-container>
      <el-main class="chat-messages">
        <div
            v-for="(message, index) in messages"
            :key="index"
            class="chat-message"
            :class="{ 'user-message': message.role === 'user', 'assistant-message': message.role === 'assistant' }"
        >
          {{ message.content }}
        </div>
      </el-main>
      <el-footer class="chat-input">
        <el-input
            v-model="inputText"
            @keyup.enter="sendMessage"
            placeholder="Type a message..."
        />
        <el-button type="primary" @click="sendMessage">Send</el-button>
      </el-footer>
    </el-container>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputText : '',
      messages  : [],
      isReplying: false,
      apiUrl    : "https://open.bigmodel.cn/api/paas/v4/chat/completions",
      apiKey    : "e9cebb68af6361efb1a28aa3060750b5.bjhL6fvF82FW2vzf"
    };
  },
  methods: {
    sendMessage() {
      if (this.inputText.trim() === '') return;
      this.addMessage('user', this.inputText);
      this.callZhiPuAPI(this.inputText);
      this.inputText = '';
    },
    callZhiPuAPI(inputText) {
      this.isReplying = true;
      this.$http.post(this.apiUrl, {
        model   : "glm-4-flash",
        messages: [{
          role   : "user",
          content: inputText
        }]
      }, {
        headers: {
          'Authorization': 'Bearer ' + this.apiKey,
          'Content-Type' : 'application/json'
        }
      }).then(response => {
        if (response.status === 200) {
          console.log(response)
          const assistantResponse = response.data.choices[0].message.content;
          this.addMessage('assistant', assistantResponse);
        } else {
          console.error('Failed to call GLM-4 API');
        }
        this.isReplying = false;
      }).catch(error => {
        console.error('API call failed', error);
        this.isReplying = false;
      });
    },
    addMessage(role, content) {
      this.messages.push({
        role,
        content
      });
    }
  }
};
</script>

<style scoped>
.chat-container {
  width: 100%;
  max-width: 600px;
  margin: auto;
  border: 1px solid #ccc;
  border-radius: 5px;
  overflow: hidden;
}

.chat-messages {
  height: 400px;
  overflow-y: auto;
  padding: 10px;
  background-color: #f5f5f5;
}

.chat-message {
  margin: 5px 0;
  padding: 5px;
  border-radius: 5px;
  max-width: 80%;
}

.user-message {
  text-align: right;
  background-color: #c8e6c9;
}

.assistant-message {
  text-align: left;
  background-color: #e3f2fd;
}

.chat-input {
  display: flex;
  align-items: center;
  padding: 10px;
}

.chat-input input {
  flex-grow: 1;
  margin-right: 10px;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.chat-input button {
  padding: 8px 15px;
  border: none;
  border-radius: 5px;
  background-color: #2196f3;
  color: white;
  cursor: pointer;
}

.chat-input button:hover {
  background-color: #1976d2;
}
</style>
